<template>
  <div v-if="!$common.isEmpty(articleList)" class="recent-post-container">
    <div class="recent-post-item shadow-box background-opacity wow"
         v-for="(article, index) in articleList"
         :key="index"
         @click="$router.push({path: `/article/${article.id}`})">
      <!-- 封面 -->
      <div class="recent-post-item-image">
        <el-image class="my-el-image"
                  v-once
                  lazy
                  :src="article.articleCover"
                  fit="cover">
          <div slot="error" class="image-slot myCenter" style="background-color: var(--lightGreen)">
            <div class="error-text">
              <div>遇事不决，可问春风</div>
            </div>
          </div>
        </el-image>
        <div class="transformCenter hasVideo" v-if="article.hasVideo">
          <svg viewBox="0 0 1024 1024" width="60" height="60">
            <path
              d="M514 114.3c-219.9 0-398.9 178.9-398.9 398.9 0.1 219.9 179 398.8 398.9 398.8 219.9 0 398.8-178.9 398.8-398.8S733.9 114.3 514 114.3z m173 421.9L437.1 680.5c-17.7 10.2-39.8-2.6-39.8-23V368.9c0-20.4 22.1-33.2 39.8-23L687 490.2c17.7 10.2 17.7 35.8 0 46z"
              fill="#0C0C0C"></path>
          </svg>
        </div>
      </div>
      <!-- 内容 -->
      <div class="recent-post-item-post">
        <!-- 时间 -->
        <div class="post-meta">
          {{ article.createTime }}
        </div>
        <!-- 标题 -->

        <el-tooltip placement="top" effect="light">
          <div slot="content">{{ article.articleTitle }}</div>
          <h3>{{ article.articleTitle }}</h3>
        </el-tooltip>

        <!-- 信息 -->
        <div class="post-meta" style="margin-bottom: 10px">
          <span>
            <svg t="1726295875901" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="11355" width="14" height="14"><path
              d="M721.066667 209.066667c-8.533333-6.4-19.2-4.266667-25.6 0-8.533333 6.4-10.666667 17.066667-6.4 25.6 12.8 25.6 17.066667 66.133333 8.533333 98.133333C618.666667 98.133333 456.533333 44.8 450.133333 42.666667c-6.4-2.133333-14.933333 0-19.2 4.266666-6.4 4.266667-8.533333 12.8-6.4 19.2 14.933333 93.866667-29.866667 209.066667-130.133333 341.333334-4.266667-34.133333-12.8-64-34.133333-100.266667-4.266667-8.533333-14.933333-12.8-23.466667-10.666667-8.533333 2.133333-17.066667 10.666667-17.066667 19.2-4.266667 51.2-25.6 96-51.2 145.066667-21.333333 40.533333-42.666667 85.333333-53.333333 132.266667-32 151.466667 32 258.133333 219.733333 362.666666 2.133333 4.266667 6.4 4.266667 8.533334 4.266667 6.4 0 14.933333-4.266667 19.2-10.666667 6.4-10.666667 2.133333-23.466667-6.4-29.866666h-2.133334C157.866667 810.666667 132.266667 714.666667 155.733333 603.733333c8.533333-42.666667 29.866667-83.2 49.066667-121.6 14.933333-29.866667 29.866667-59.733333 40.533333-89.6 4.266667 23.466667 6.4 44.8 8.533334 72.533334 0 8.533333 6.4 17.066667 14.933333 19.2 8.533333 2.133333 17.066667 0 23.466667-6.4 117.333333-142.933333 177.066667-270.933333 174.933333-379.733334 51.2 27.733333 153.6 106.666667 202.666667 292.266667 2.133333 6.4 6.4 12.8 14.933333 14.933333 6.4 2.133333 14.933333 0 21.333333-4.266666 29.866667-27.733333 40.533333-68.266667 40.533334-108.8 55.466667 66.133333 136.533333 187.733333 130.133333 322.133333-6.4 104.533333-66.133333 196.266667-179.2 270.933333C748.8 716.8 682.666667 509.866667 533.333333 405.333333c-6.4-4.266667-17.066667-4.266667-23.466666 0-6.4 4.266667-10.666667 12.8-8.533334 21.333334 6.4 32 2.133333 104.533333-27.733333 166.4-8.533333-42.666667-27.733333-68.266667-27.733333-70.4-4.266667-6.4-12.8-8.533333-21.333334-8.533334-8.533333 2.133333-14.933333 8.533333-14.933333 17.066667 0 0-12.8 68.266667-59.733333 134.4-25.6 38.4-51.2 83.2-53.333334 138.666667 0 12.8 8.533333 21.333333 21.333334 21.333333 12.8 2.133333 21.333333-8.533333 21.333333-21.333333 2.133333-46.933333 23.466667-83.2 46.933333-117.333334 23.466667-32 38.4-66.133333 49.066667-91.733333 2.133333 17.066667 4.266667 38.4 0 61.866667-2.133333 8.533333 2.133333 19.2 10.666667 23.466666 8.533333 4.266667 19.2 2.133333 25.6-4.266666 55.466667-61.866667 76.8-149.333333 78.933333-211.2 123.733333 113.066667 166.4 311.466667 89.6 456.533333v2.133333c0 2.133333 0 2.133333-2.133333 4.266667v8.533333c0 2.133333 0 2.133333 2.133333 4.266667v2.133333l2.133333 2.133334c0 2.133333 2.133333 2.133333 2.133334 4.266666 0 0 2.133333 2.133333 4.266666 2.133334l2.133334 2.133333c2.133333 0 2.133333 0 4.266666 2.133333h10.666667c2.133333 0 4.266667 0 6.4-2.133333 162.133333-89.6 247.466667-204.8 253.866667-339.2 2.133333-204.8-172.8-381.866667-204.8-405.333333z"
              fill="#a2a2a2" p-id="11356"></path></svg> {{ article.viewCount }}
          </span>
          <span>
            <svg t="1726295967517" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="6246" width="14" height="14"><path
              d="M512 928c-8.192 0-16.384-3.136-22.624-9.376l-96-96c-12.512-12.512-12.512-32.736 0-45.248s32.736-12.512 45.248 0L512 850.752l73.376-73.376C591.36 771.36 599.488 768 608 768l224 0c17.664 0 32-14.336 32-32L864 224c0-17.632-14.336-32-32-32L192 192C174.368 192 160 206.368 160 224l0 512c0 17.664 14.368 32 32 32l96 0c17.664 0 32 14.304 32 32s-14.336 32-32 32L192 832c-52.928 0-96-43.072-96-96L96 224c0-52.928 43.072-96 96-96l640 0c52.928 0 96 43.072 96 96l0 512c0 52.928-43.072 96-96 96l-210.752 0-86.624 86.624C528.384 924.864 520.192 928 512 928z"
              p-id="6247" fill="#a2a2a2"></path><path
              d="M336 512C309.536 512 288 490.464 288 464S309.536 416 336 416s48 21.536 48 48S362.464 512 336 512z"
              p-id="6248" fill="#a2a2a2"></path><path
              d="M528 512c-26.464 0-48-21.536-48-48s21.536-48 48-48 48 21.536 48 48S554.464 512 528 512z" p-id="6249"
              fill="#a2a2a2"></path><path
              d="M720 512c-26.464 0-48-21.536-48-48s21.536-48 48-48 48 21.536 48 48S746.464 512 720 512z" p-id="6250"
              fill="#a2a2a2"></path></svg> {{ article.commentCount }}
          </span>
          <span>
            <svg t="1726296026346" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="6555" width="14" height="14"><path
              d="M512 928c-28.928 0-57.92-12.672-86.624-41.376L106.272 564C68.064 516.352 32 471.328 32 384c0-141.152 114.848-256 256-256 53.088 0 104 16.096 147.296 46.592 14.432 10.176 17.92 30.144 7.712 44.608-10.176 14.432-30.08 17.92-44.608 7.712C366.016 204.064 327.808 192 288 192c-105.888 0-192 86.112-192 192 0 61.408 20.288 90.112 59.168 138.688l315.584 318.816C486.72 857.472 499.616 863.808 512 864c12.704 0.192 24.928-6.176 41.376-22.624l316.672-319.904C896.064 493.28 928 445.696 928 384c0-105.888-86.112-192-192-192-48.064 0-94.08 17.856-129.536 50.272l-134.08 134.112c-12.512 12.512-32.736 12.512-45.248 0s-12.512-32.736 0-45.248l135.104-135.136C610.56 151.808 671.904 128 736 128c141.152 0 256 114.848 256 256 0 82.368-41.152 144.288-75.68 181.696l-317.568 320.8C569.952 915.328 540.96 928 512 928z"
              p-id="6556" fill="#a2a2a2"></path></svg> {{ article.likeCount }}
          </span>
        </div>
        <!-- 内容 -->
        <div class="recent-post-desc">
          {{ article.articleContent }}
        </div>
        <!-- 分类 标签 -->
        <div class="sort-label">
          <span style="margin-right: 12px"
                @click.stop="$router.push({path: '/sort', query: {sortId: article.sortId}})">
            {{ article.sort.sortName }}
          </span>
          <span @click.stop="$router.push({path: '/sort', query: {sortId: article.sortId, labelId: article.labelId}})">
             {{ article.label.labelName }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    articleList: {
      type: Array
    }
  },
  methods: {}
}
</script>

<style scoped>

.recent-post-container {
  display: flex;
  flex-wrap: wrap;
}

.recent-post-item {
  position: relative;
  user-select: none;
  border-radius: 0px;
  overflow: hidden;
  margin: 10px;
  height: 370px;
  flex-shrink: 0;
  width: calc(100% / 3 - 20px);
  cursor: pointer;
  animation: zoomIn 0.8s ease-in-out;
}

.recent-post-item-image {
  width: 100%;
  height: 170px;
  position: relative;
}

.recent-post-item-image >>> .el-image__inner {
  transition: all 1s;
}

.recent-post-item-image >>> .el-image__inner:hover {
  transform: scale(1.2);
}

.recent-post-item-post {
  width: 100%;
  height: 180px;
  padding: 10px 15px;
}

.recent-post-item-post h3 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top: 15px;
  margin-bottom: 15px;
}

.post-meta {
  font-size: 14px;
  color: var(--greyFont);
}

.recent-post-desc {
  color: #b3b3b3;
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sort-label {
  margin-top: 15px;
}

.sort-label span {
  padding: 3px 7px;
  background-color: var(--maxLightGray);
  border-radius: 0px;
  font-size: 12px;
  color: var(--greyFont);
  transition: all 0.3s;
  cursor: pointer;
  user-select: none;
}

.sort-label span:hover {
  background-color: var(--darkBlue);
  color: var(--white);
}

.error-text {
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 4px;
  color: var(--white);
}

.hasVideo {
  padding: 0 20px;
  background: var(--maxMaxWhiteMask);
  border-radius: 15px;
}

@media screen and (max-width: 1400px) {
  .recent-post-item {
    width: calc(100% / 2 - 20px);
  }
}

@media screen and (max-width: 600px) {
  .recent-post-item {
    width: calc(100% - 20px);
  }
}

</style>
